<template>
  <div class="emoji" :style="{ height: height + 'px' }">
    <div class="emoji-line" v-for="(line, i) in emojis" :key="i">
      <div
        class="emoji-line-item"
        v-for="(item, index) in line"
        :key="index"
        @tap="clickEmoji(item)"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const props = defineProps({
  height: {
    type: Number,
    default: 260
  }
})

const emit = defineEmits(['emotion'])

const emojis = reactive([
  ['😀', '😁', '😂', '🤣', '😃', '😅', '😆'],
  ['😉', '😊', '😋', '😎', '😍', '😘', '😗'],
  ['😙', '😚', '🙂', '🤗', '🤔', '😐', '😑'],
  ['😶', '🙄', '😏', '😣', '😥', '😮', '🤐'],
  ['😯', '😪', '😫', '😴', '😌', '😛', '😜'],
  ['😝', '🤤', '😒', '😓', '😔', '😕', '🙃'],
  ['🤑', '😲', '🙁', '😖', '😟', '😤', '😢'],
  ['😭', '😧', '😨', '😩', '😬', '😰', '😳'],
  ['😱', '😵', '😡', '😠', '😷', '🤒', '🤕'],
  ['🤢', '🤧', '😇', '👻', '💀', '💩', '😈'],
  ['💋', '👄', '🌂', '👗', '🚫', '👜', '💼'],
  ['💍', '👠', '💯', '🛌', '💣', '👨🏻', '👩🏻'],
  ['🛍', '🎉', '🛀', '🎁', '💄', '🎅🏼', '🙅🏻‍'],
  ['🙆🏻', '🙋🏻', '🙇🏻', '🤦🏻', '🤷🏻', '💆🏻', '💇🏻'],
  ['📷', '💪', '👈', '👉', '👆', '👇', '🤘'],
  ['✌', '🤙', '👌', '👍', '👎', '👊', '👋'],
  ['✍', '👏', '🙏', '💅', '💗', '🏃🏻‍', '💔'],
  ['👯', '💑', '👪', '🙈', '💥', '💦', '🐒'],
  ['🐶', '🦊', '🐱', '🦁', '🐯', '🐴', '🦄'],
  ['🐎', '🐮', '🐷', '🐏', '🐫', '🐘', '🐹'],
  ['🐰', '🐨', '🐼', '🐾', '🐔', '🐥', '🐧'],
  ['🐸', '🐳', '🐲', '🐬', '🐠', '🐡', '🐟'],
  ['🐙', '🐚', '🦀', '🦐', '🦑', '🐌', '🦋'],
  ['🐜', '🐞', '🐝', '🕸', '🕷', '🌹', '🥀'],
  ['🌻', '🎄', '🌴', '🌵', '🍀', '🌞', '🌏'],
  ['⛅', '🌧', '🌈', '🌨', '⛄', '🔥', '💧'],
  ['☔', '🎃', '🍉', '🍌', '🍍', '🍎', '🍒'],
  ['🍓', '🥝', '🥑', '🍆', '🌽', '🍗', '🍔'],
  ['🍚', '🍦', '🎂', '🍭', '☕', '🍷', '🍺'],
  ['🍹', '🏇', '⛷', '🏌', '🚣🏻', '🏊', '🏆'],
  ['⛹', '🚴', '🤽', '🏅', '🏐', '🏀', '⚽'],
  ['⚾', '🏈', '🎾', '🎳', '🏓', '🏸', '⛸'],
  ['🎣', '🎯', '🎮', '🎲', '🎨', '🎧', '🎬'],
  ['🏝', '🏩', '🚃', '🚍', '🚘', '🚲', '✈']
])

const clickEmoji = e => {
  console.log(e);
  emit('emotion', e)
}
</script>

<style lang="less" scoped>
.emoji {
  width: 100%;
  padding: 16rpx 10rpx 188rpx 10rpx;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
  .emoji-line {
    display: flex;
    .emoji-line-item {
      flex: 1;
      text-align: center;
      font-size: 52rpx;
      line-height: 80rpx;
    }
  }
}
</style>
